<template>
  <div class="service-fav">
    <loading :show="loading" />
    <ul class="list">
      <template v-for="(item, index) in list">
        <li
          class="list-item"
          :key="index"
          v-if="item.article"
        >
          <div v-if="item.article.mainImage" class="image" @click="$router.push(`/article/view/${item.article.id}`)">
            <img v-lazy="item.article.mainImage.thumbnail_path" v-if="item.article.mainImage"/>
          </div>
          <div class="desc" @click="$router.push(`/article/view/${item.article.id}`)">
            <p class="title">{{item.article.title}}</p>
            <p class="time">{{item.create_time}}</p>
          </div>
          <div class="delete" @click="remove(item)" v-if="!item.disabled">
            <cube-button inline primary>取消收藏</cube-button>
          </div>
        </li>
      </template>
    </ul>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
export default {
  name: 'ArticleFav',
  components: {
    PullUp,
    Loading
  },
  data() {
    return {
      loading: false,
      list: [],
      queryList: {}
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Article.favList({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
            // console.log(this.list)
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    remove(item) {
      // disable btn
      this.$set(item, 'disabled', true)
      this.$createDialog({
        type: 'confirm',
        title: '确定取消这个收藏吗?',
        onConfirm: () => {
          this.loading = true
          api.Article.removeFav({ id: item.article_id }).then(() => {
            this.$createToast({
              type: 'correct',
              time: 500,
              txt: '取消成功',
              onTimeout: () => {
                this.list = this.list.filter(x => x.id !== item.id)
              }
            }).show()
          }).finally(() => {
            this.loading = false
          })
        },
        onCancel: () => {
          // disable btn
          this.$set(item, 'disabled', false)
        }
      }).show()
    }
  },
  created () {
    this.init()
    this.getList()
  },
  activated () {
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.service-fav
  //background red
  .list
    .list-item
      background white
      padding 10px
      border-radius 5px
      margin-bottom 10px
      display flex
      position relative
      min-height 100px
      .image
        width 85px
        padding 5px
      .desc
        flex 1
        text-align left
        padding-left 15px
        .title
          font-weight 700
          font-size 14px
          line-height 18px
        .time
          font-weight 700
          color #ccc
          margin-top 5px
      .delete
        position absolute
        right 15px
        top 50px
</style>
